import React, { Component } from 'react';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import {
  Card,
  Col,
  Input,
  Select,
  Row,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { Item } = Form;

interface AccountInfoProps {
  detail?: any;
  forms: any;
}

interface AccountInfoState {
  aShowBank: number;
  bShowBank: number;
  pre_aShowBank: number;
  pre_bShowBank: number;
}

function mapStateToProps(state: any) {
  const { franchiseeContractEditor: { detail } } = state;

  return {
    detail,
  };
}

@connect(mapStateToProps)

class AccountInfoElem extends Component<AccountInfoProps, AccountInfoState> {
  state: AccountInfoState = {
    aShowBank: 0,
    bShowBank: 0,
    pre_aShowBank: 0,
    pre_bShowBank: 0,
  };

  static getDerivedStateFromProps(nextProps: AccountInfoProps, preState: AccountInfoState) {
    const { detail: { party_a_acc_type, party_b_acc_type } } = nextProps;
    const { pre_aShowBank, pre_bShowBank } = preState;
    if (party_a_acc_type
      && party_b_acc_type
      && party_a_acc_type !== pre_aShowBank
      && party_b_acc_type !== pre_bShowBank
    ) {
      return ({
        aShowBank: party_a_acc_type === 1 ? 1 : 0,
        pre_aShowBank: party_a_acc_type,
        bShowBank: party_b_acc_type === 1 ? 1 : 0,
        pre_bShowBank: party_b_acc_type,
      });
    }
    return null;
  }

  handleMerchantsA = (value: number) => {
    if (value !== 1) {
      this.setState({ aShowBank: 0 });
    } else {
      this.setState({ aShowBank: 1 });
    }
  }

  handleMerchantsB = (value: number) => {
    if (value !== 1) {
      this.setState({ bShowBank: 0 });
    } else {
      this.setState({ bShowBank: 1 });
    }
  }

  render() {
    const { aShowBank, bShowBank } = this.state;
    const { detail, forms: { getFieldDecorator } } = this.props;

    return (
      <Card title="账户信息" bordered={false}>
        <Row gutter={12}>
          <Col md={10} sm={24}>
            <div className="dottedBox">
              <div className="subtitle marginB16">甲方账户信息</div>
              <Item label="账户类型">
                {getFieldDecorator('party_a_acc_type', {
                  initialValue: detail.party_a_acc_type,
                  rules: [{ required: true, message: '请选择账户类型' }],
                })(
                  <Select
                    placeholder="请选择"
                    style={{ width: '90%' }}
                    onChange={this.handleMerchantsA}
                  >
                    <Option value={1}>银行卡</Option>
                    <Option value={2}>支付宝</Option>
                    <Option value={3}>微信</Option>
                  </Select>,
                )}
              </Item>
              {Boolean(aShowBank) && (
                <Item label="　开户行">
                  {getFieldDecorator('party_a_acc_bank', {
                    initialValue: detail.party_a_acc_bank,
                    rules: [{ required: true, message: '请输入开户行' }],
                  })(
                    <Input allowClear style={{ width: '90%' }} placeholder="请输入" />,
                  )}
                </Item>
              )}
              <Item label="账户名称">
                {getFieldDecorator('party_a_acc_name', {
                  initialValue: detail.party_a_acc_name,
                  rules: [{ required: true, message: '请输入账户名称' }],
                })(
                  <Input allowClear style={{ width: '90%' }} placeholder="请输入" />,
                )}
              </Item>
              <Item label="账户账号" className="marginB0Import">
                {getFieldDecorator('party_a_acc_num', {
                  initialValue: detail.party_a_acc_num,
                  rules: [{ required: true, message: '请输入账户账号' }],
                })(
                  <Input
                    allowClear
                    type="number"
                    style={{ width: '90%' }}
                    placeholder="请输入"
                  />,
                )}
              </Item>
            </div>
          </Col>
          <Col md={10} sm={24}>
            <div className="dottedBox">
              <div className="subtitle marginB16">乙方账户信息</div>
              <Item label="账户类型">
                {getFieldDecorator('party_b_acc_type', {
                  initialValue: detail.party_b_acc_type,
                  rules: [{ required: true, message: '请选择账户类型' }],
                })(
                  <Select
                    placeholder="请选择"
                    style={{ width: '90%' }}
                    onChange={this.handleMerchantsB}
                  >
                    <Option value={1}>银行卡</Option>
                    <Option value={2}>支付宝</Option>
                    <Option value={3}>微信</Option>
                  </Select>,
                )}
              </Item>
              {Boolean(bShowBank) && (
                <Item label="　开户行">
                  {getFieldDecorator('party_b_acc_bank', {
                    initialValue: detail.party_b_acc_bank,
                    rules: [{ required: true, message: '请输入开户行' }],
                  })(
                    <Input allowClear style={{ width: '90%' }} placeholder="请输入" />,
                  )}
                </Item>
              )}
              <Item label="账户名称">
                {getFieldDecorator('party_b_acc_name', {
                  initialValue: detail.party_b_acc_name,
                  rules: [{ required: true, message: '请输入账户名称' }],
                })(
                  <Input allowClear style={{ width: '90%' }} placeholder="请输入" />,
                )}
              </Item>
              <Item label="账户账号" className="marginB0Import">
                {getFieldDecorator('party_b_acc_num', {
                  initialValue: detail.party_b_acc_num,
                  rules: [{ required: true, message: '请输入账户账户' }],
                })(
                  <Input
                    allowClear
                    type="number"
                    style={{ width: '90%' }}
                    placeholder="请输入"
                  />,
                )}
              </Item>
            </div>
          </Col>
        </Row>
      </Card>
    );
  }
}

export default AccountInfoElem;
